<script setup>
import api from '@/api/index.js'
import { message, notification } from 'ant-design-vue';
import { computed, ref, h, provide } from 'vue';
import MyTable from '@/components/MyTable/MyTable.vue';
import { Modal } from 'ant-design-vue';

const props = defineProps({
  // 表格数据总条数
  total: { type: Number, default: 0 },
  // 表格当前页码
  pageNum: { type: Number, default: 1 },
})
const emits = defineEmits(['edit', 'detail', 'pageChange'])
// 分页参数
const pagination = computed(() => ({
  total: props.total,
  showSizeChanger: false,
  current: props.pageNum,
  onChange: e => { emits('pageChange', e) }
}))
// 表格列配置
const columns = ref([
  { ellipsis: true, title: '用户名称', dataIndex: 'name', key: 'name', },
  // { ellipsis: true, title: '用户角色', dataIndex: 'roles', key: 'roles', },
  { ellipsis: true, title: '用户邮箱', dataIndex: 'email', key: 'email', },
  { ellipsis: true, title: '用户电话', dataIndex: 'phone', key: 'phone', },
  { ellipsis: true, title: '登录帐号', dataIndex: 'userName', key: 'userName', },
  { ellipsis: true, title: '角色', key: 'roleInfo', },
  { ellipsis: true, title: '所属部门', key: 'departmentInfo', },
  { ellipsis: true, title: '创建时间', dataIndex: 'createdDate', key: 'createdDate', },
  { ellipsis: true, title: '操作', key: 'set', width: '400px' },
])
// 编辑数据
const edit = (item) => {
  emits('edit', item)
}
// 查看详情
const detail = (item) => {
  emits('detail', item)
}
// 冻结账号
const freeze = (item) => {
  if (item.state) {
    toFree(item)
  } else {
    offFree(item)
  }
}
// 发送解冻请求
const offFree = item => {
  Modal.warning({
    title: '用户解冻',
    content: h('span', {}, '解冻后用户可以正常使用，是否解冻用户：',
      h('span', { style: { color: '#09c690' } }, item.name),
    ),
    okText: '解冻',
    okCancel: true,
    okButtonProps: { type: 'primary', danger: true },
    cancelButtonProps: { type: 'primary' },
    cancelText: '取消',
    onOk: async () => {
      await api.editUser({ ...item, state: 1 })
      message.success('解冻成功');
      emits('reload')
      return Promise.resolve()
    },
    onCancel: () => {
      message.success('取消解冻');
      return Promise.resolve()
    }
  });
}
// 发送冻结请求
const toFree = (item) => {
  Modal.warning({
    title: '冻结用户',
    content: h('span', {}, '冻结后用户无法登录，是否冻结用户：',
      h('span', { style: { color: '#09c690' } }, item.name),
    ),
    okText: '冻结',
    okCancel: true,
    okButtonProps: { type: 'primary', danger: true },
    cancelButtonProps: { type: 'primary' },
    cancelText: '取消',
    onOk: async () => {
      await api.editUser({ ...item, state: 0 })
      message.success('冻结成功');
      emits('reload')
      return Promise.resolve()
    },
    onCancel: () => {
      message.success('取消冻结');
      return Promise.resolve()
    }
  });
}
// 重置密码
const reset = (item) => {
  Modal.warning({
    title: '重置密码',
    content: h('span', {}, '是否重置用户',
      h('span', { style: { margin: '0 10px', color: '#09c690' } }, item.name),
      h('span', {}, '的密码？'),
    ),
    okText: '重置',
    okCancel: true,
    okButtonProps: { type: 'primary', danger: true },
    cancelButtonProps: { type: 'primary' },
    cancelText: '取消',
    onOk: async () => {
      const { data } = await api.resetUserPwd({ id: item.id })
      console.log(data);
      notification.success({
        message: '用户密码重置成功！',
        description: h('span', {}, '登录账号：',
          h('span', { style: { color: '#ff0000' } }, data.username),
          h('br', {}, ''),
          '默认密码：',
          h('span', { style: { color: '#ff0000' } }, data.password),
        ),
        duration: 0,
      });
      emits('reload')
      return Promise.resolve()
    },
    onCancel: () => {
      message.success('取消重置');
      return Promise.resolve()
    }
  });
}
//删除数据
const del = item => {
  Modal.warning({
    title: '删除用户',
    content: h('span', {}, '是否删除用户：',
      h('span', { style: { color: '#09c690' } }, item.name),
    ),
    okText: '删除',
    okCancel: true,
    okButtonProps: { type: 'primary', danger: true },
    cancelButtonProps: { type: 'primary' },
    cancelText: '取消',
    onOk: async () => {
      await api.delUser({ id: item.id })
      message.success('删除成功');
      emits('reload')
      return Promise.resolve()
    },
    onCancel: () => {
      message.success('取消删除');
      return Promise.resolve()
    }
  });
}
provide('columns', columns.value)
</script>

<template>
  <MyTable :pagination="pagination" :scroll="{ y: 'calc(100vh - 383px)' }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'departmentInfo' && record.departmentInfo">
        <a-tag color="green" v-for="item of record.departmentInfo" :key="item">{{ item.name }}</a-tag>
      </template>
      <template v-if="column.key === 'roleInfo' && record.roleInfo">
        <a-tag color="green" v-for="item of record.roleInfo" :key="item">{{ item.name }}</a-tag>
      </template>
      <template v-if="column.key === 'set'">
        <AButton type="link" @click="detail(record)">详情</AButton>
        <AButton type="link" @click="edit(record)">编辑</AButton>
        <AButton type="link" @click="freeze(record)">{{ record.state ? '冻结' : '解冻' }}</AButton>
        <AButton type="link" @click="reset(record)" v-if="record.state">重置密码</AButton>
        <AButton type="link" class="com-delbtn" @click="del(record)">删除</AButton>
      </template>
    </template>
  </MyTable>
</template>